import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import s from './style.module.css';

function MonitorCounts({
	className,
	routeCount,
	abnormalRouteCount,
	changesCount,
}) {
	return (
		<div className={cn(className, s.monitorCounts)}>
			<div className={s.item}>
				<div className={cn(s.icon, s.asset)}>
					<svg
						width="54px"
						height="54px"
						viewBox="0 0 54 54"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						xlink="http://www.w3.org/1999/xlink"
					>
						<g
							id="页面-1"
							stroke="none"
							strokeWidth="1"
							fill="none"
							fillRule="evenodd"
						>
							<g
								id="未开通套餐备份"
								transform="translate(-352.000000, -247.000000)"
							>
								<g
									id="icon_路径总数"
									transform="translate(352.000000, 247.000000)"
								>
									<g id="icon-web漏洞" stroke="#0B6FD6">
										<circle id="椭圆形" cx="27" cy="27" r="26.5"></circle>
									</g>
									<g
										id="3.Icon/1.线性/2.业务安全类/内容分发网络"
										transform="translate(16.000000, 16.000000)"
										fill="#0B6FD6"
									>
										<path
											d="M6,0 C7.1045695,0 8,0.8954305 8,2 L8,6 L14,6 L14,2 C14,0.8954305 14.8954305,0 16,0 L20,0 C21.1045695,0 22,0.8954305 22,2 L22,6 C22,7.1045695 21.1045695,8 20,8 L16,8 L16,14 L20,14 C21.1045695,14 22,14.8954305 22,16 L22,20 C22,21.1045695 21.1045695,22 20,22 L16,22 C14.8954305,22 14,21.1045695 14,20 L14,16 L8,16 L8,20 C8,21.1045695 7.1045695,22 6,22 L2,22 C0.8954305,22 0,21.1045695 0,20 L0,16 C0,14.8954305 0.8954305,14 2,14 L6,14 L6,8 L2,8 C0.8954305,8 0,7.1045695 0,6 L0,2 C0,0.8954305 0.8954305,0 2,0 L6,0 Z M6,16 L2,16 L2,20 L6,20 L6,16 Z M20,16 L16,16 L16,20 L20,20 L20,16 Z M14,8 L8,8 L8,14 L14,14 L14,8 Z M6,2 L2,2 L2,6 L6,6 L6,2 Z M20,2 L16,2 L16,6 L20,6 L20,2 Z"
											id="形状"
										></path>
									</g>
								</g>
							</g>
						</g>
					</svg>
				</div>
				<div className={s.text}>
					<div className={s.counts}>{routeCount}</div>
					<div className={s.label}>监测总路径数</div>
				</div>
			</div>
			<div className={s.item}>
				<div className={cn(s.icon, s.total)}>
					<svg
						width="54px"
						height="54px"
						viewBox="0 0 54 54"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						xlink="http://www.w3.org/1999/xlink"
					>
						<g
							id="页面-1"
							stroke="none"
							strokeWidth="1"
							fill="none"
							fillRule="evenodd"
						>
							<g
								id="未开通套餐备份"
								transform="translate(-744.000000, -247.000000)"
							>
								<g
									id="icon_异常路径"
									transform="translate(744.000000, 247.000000)"
								>
									<g
										id="icon-web漏洞"
										stroke="#F04038"
										strokeOpacity="0.483391608"
									>
										<circle id="椭圆形" cx="27" cy="27" r="26.5"></circle>
									</g>
									<g
										id="3.Icon/1.线性/2.业务安全类/内容分发网络"
										transform="translate(16.000000, 16.000000)"
										fill="#F04038"
									>
										<path
											d="M6,0 C7.1045695,0 8,0.8954305 8,2 L8,6 L14,6 L14,2 C14,0.8954305 14.8954305,0 16,0 L20,0 C21.1045695,0 22,0.8954305 22,2 L22,6 C22,7.1045695 21.1045695,8 20,8 L16,8 L16,14 L20,14 C21.1045695,14 22,14.8954305 22,16 L22,20 C22,21.1045695 21.1045695,22 20,22 L16,22 C14.8954305,22 14,21.1045695 14,20 L14,16 L8,16 L8,20 C8,21.1045695 7.1045695,22 6,22 L2,22 C0.8954305,22 0,21.1045695 0,20 L0,16 C0,14.8954305 0.8954305,14 2,14 L6,14 L6,8 L2,8 C0.8954305,8 0,7.1045695 0,6 L0,2 C0,0.8954305 0.8954305,0 2,0 L6,0 Z M6,16 L2,16 L2,20 L6,20 L6,16 Z M20,16 L16,16 L16,20 L20,20 L20,16 Z M14,8 L8,8 L8,14 L14,14 L14,8 Z M6,2 L2,2 L2,6 L6,6 L6,2 Z M20,2 L16,2 L16,6 L20,6 L20,2 Z"
											id="形状"
										></path>
									</g>
									<g
										id="3.Icon/2.面性/4.操作编辑类/风险"
										transform="translate(34.000000, 31.000000)"
										fill="#FAAF2C"
									>
										<path
											d="M6.43805596,0.259040625 L11.9374032,10.2590406 C12.1206559,10.5922669 11.8796037,11 11.4993472,11 L0.500652775,11 C0.120396345,11 -0.120655885,10.5922669 0.0625968185,10.2590406 L5.56194404,0.259040625 C5.75188462,-0.086346875 6.24811538,-0.086346875 6.43805596,0.259040625 Z M6,4.23076923 L6,7.61538462 L5.14285714,7.61538462 L5.14285714,4.23076923 L6,4.23076923 Z M5.14285714,8.46153846 L6,8.46153846 L6,9.30769231 L5.14285714,9.30769231 L5.14285714,8.46153846 Z"
											id="形状"
										></path>
									</g>
								</g>
							</g>
						</g>
					</svg>
				</div>
				<div className={s.text}>
					<div className={s.counts}>{abnormalRouteCount}</div>
					<div className={s.label}>监测异常路径数</div>
				</div>
			</div>
			<div className={s.item}>
				<div className={cn(s.icon, s.today)}>
					<svg
						width="56px"
						height="56px"
						viewBox="0 0 56 56"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						xlink="http://www.w3.org/1999/xlink"
					>
						<g
							id="页面-1"
							stroke="none"
							strokeWidth="1"
							fill="none"
							fillRule="evenodd"
						>
							<g
								id="未开通套餐备份"
								transform="translate(-1143.000000, -242.000000)"
							>
								<g
									id="icon_新增路径"
									transform="translate(1144.000000, 243.000000)"
								>
									<g id="Group-4" fill="#FFFFFF" stroke="#F9E4C6">
										<circle id="Oval-Copy-5" cx="27" cy="27" r="27"></circle>
									</g>
									<g
										id="3.Icon/2.面性/4.操作编辑类/添加"
										transform="translate(37.000000, 30.000000)"
										fill="#F2655F"
									>
										<path
											d="M6,0 C9.3137085,0 12,2.6862915 12,6 C12,9.3137085 9.3137085,12 6,12 C2.6862915,12 0,9.3137085 0,6 C0,2.6862915 2.6862915,0 6,0 Z M6.5,2.5 L5.5,2.5 L5.5,5.5 L2.5,5.5 L2.5,6.5 L5.5,6.5 L5.5,9.5 L6.5,9.5 L6.5,6.5 L9.5,6.5 L9.5,5.5 L6.5,5.5 L6.5,2.5 Z"
											id="形状"
										></path>
									</g>
									<g
										id="3.Icon/1.线性/2.业务安全类/内容分发网络"
										transform="translate(16.000000, 16.000000)"
										fill="#FAAF2C"
									>
										<path
											d="M6,0 C7.1045695,0 8,0.8954305 8,2 L8,6 L14,6 L14,2 C14,0.8954305 14.8954305,0 16,0 L20,0 C21.1045695,0 22,0.8954305 22,2 L22,6 C22,7.1045695 21.1045695,8 20,8 L16,8 L16,14 L20,14 C21.1045695,14 22,14.8954305 22,16 L22,20 C22,21.1045695 21.1045695,22 20,22 L16,22 C14.8954305,22 14,21.1045695 14,20 L14,16 L8,16 L8,20 C8,21.1045695 7.1045695,22 6,22 L2,22 C0.8954305,22 0,21.1045695 0,20 L0,16 C0,14.8954305 0.8954305,14 2,14 L6,14 L6,8 L2,8 C0.8954305,8 0,7.1045695 0,6 L0,2 C0,0.8954305 0.8954305,0 2,0 L6,0 Z M6,16 L2,16 L2,20 L6,20 L6,16 Z M20,16 L16,16 L16,20 L20,20 L20,16 Z M14,8 L8,8 L8,14 L14,14 L14,8 Z M6,2 L2,2 L2,6 L6,6 L6,2 Z M20,2 L16,2 L16,6 L20,6 L20,2 Z"
											id="形状"
										></path>
									</g>
								</g>
							</g>
						</g>
					</svg>
				</div>
				<div className={s.text}>
					<div className={s.counts}>{changesCount}</div>
					<div className={s.label}>监测新增路径数</div>
				</div>
			</div>
		</div>
	);
}

MonitorCounts.propTypes = {
	className: PropTypes.string,
	routeCount: PropTypes.number,
	abnormalRouteCount: PropTypes.number,
	changesCount: PropTypes.number,
};
MonitorCounts.defaultProps = {
	className: s.monitorCounts,
	routeCount: 0,
	abnormalRouteCount: 0,
	changesCount: 0,
};

export default MonitorCounts;
